<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Growfield</title>
        <style type="text/css">
            #area2 {
                min-height: 100px;
                max-height: 200px;
            }

            #area4 {
                min-height: 100px;
                height: 100px;
            }

            .title h2{
                font-size: 2em;
                font-weight: bold;
            }

            .content {
                vertical-align: top;
            }
            
            #area6 {
                height: 300px;
            }
            #area1,#area2,#area3,#area4,#area5,#area6,#area7,#area8 {
                float: left;
            }
        </style>
        <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'></script>
        <script type="text/javascript" src='@DESTFILE@'></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#area1")
                    .growfield();
                $("#area2")
                    .growfield();
                $("#area3")
                    .growfield({
                        min: 100,
                        max: 300
                    });
                $("#area4")
                    .growfield({
                        restore: true,
                        min: 200,
                        max: 300
                    });
                $("#area5")
                    .growfield({
                        auto: false,
                        animate: false,
                        step: 20,
                        min: 300,
                        max: 600
                    });
                $("#area6")
                    .growfield("disable");
                
                $("#area7")
                    .growfield();
                              
                $("#area8")
                    .growfield()
                    .attr("width","50%");
            });
        </script>
    </head>
    <body>
        <div class="title">
            <h2>Here are some examples of how growfield can be used. Check out the source...</h2>
        </div>
        <div class="content">
            <textarea id="area1">This is an example text area with no CSS applied, and default growfield behavior.</textarea>
            <textarea id="area2">This is an example with css-based min/max height.</textarea>
            <textarea id="area3">This is an example with growfield-based min/max height.</textarea>
            <textarea id="area4">This is an example with restore (note that using the min-height or implicitly stating the height of this text area should help with keeping the page looking the way you want it when the growfield restores).</textarea>
            <textarea id="area5">This is a non-auto text area. Use ctrl + up/down to change size, notice min/max still apply. Note that in webkit based browsers the resize functionality in the lower-right corner is enabled.</textarea>
            <textarea id="area6">This text area has growfield applied but has it disabled.</textarea>
            <label><textarea id="area7">This text area has growfield applied and it is inside a label.</textarea></label>
            <textarea id="area8" width="100%">This text area has an inline style.</textarea>
    </body>
</html>